<template>
	<view class="page">
		<view class="form_body">
			<view class="form_part">
				<view class="form_item">
					<view class="form_item_title"><text>*</text>反馈类型</view>
					<u-radio-group v-model="form.types" placement="row">
						<u-radio shape="circle" size="14" :label="item" :name="item" v-for="(item, i) in types"
							:key="i"></u-radio>
					</u-radio-group>
				</view>
				<view class="form_item form_item_textarea">
					<view class="form_item_title"><text>*</text>问题描述</view>
					<u--textarea confirmType="done" v-model="form.content" placeholder="请详细描述您的问题"></u--textarea>
				</view>
			</view>
			<view class="form_part">
				<view class="form_item_title">上传凭证(不超过三张)</view>
				<view class="pic_logo_1">
					<view v-for="(it, index) in image" :key="index" class="uploader_img_1">
						<image :src="$t.getImgUrl(it)" />
						<u-icon name="close-circle-fill" @click="closeImg(index)" size="22" color="#ABABAB"></u-icon>
					</view>
					<view>
						<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
							:maxCount="10" :previewFullImage="true"></u-upload>
					</view>
				</view>
			</view>
			<view class="form_part form_contact">
				<view class="form_item">
					<view class="form_item_title"><text>*</text>联系人</view>
					<u--input placeholder="请输入您的联系姓名" border="none" inputAlign="right" v-model="form.man"></u--input>
				</view>
				<view class="form_item">
					<view class="form_item_title"><text>*</text>联系方式</view>
					<u--input placeholder="请输入您的联系方式" border="none" inputAlign="right" v-model="form.tel"></u--input>
				</view>
			</view>
			<view class="btn">
				<u-button text="提交" shape="circle" size="large" color="#F21E46"></u-button>
			</view>

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				tel: "",
				man: "",
			},
			types: [
				"商家问题",
				"账号问题",
				"支付问题",
				"其他问题"
			],
			image: [],
			fileList3: [],
		};
	},
	onLoad() {
		// this.form = {
		// 	tel: this.userInfo.tel || "",
		// 	man: this.userInfo.nickname || "",
		// };
		// this.getFeedbackType();
	},

	methods: {
		afterRead(e) {
			console.log(e)
		},
		deletePic(e) {
			let index = e.index
			this.fileList3 = this.fileList3.splice(0, index)
		},
		getFeedbackType() {
			this.$api.getUser.getFeedbackType({}).then(res => {
				if (res.code == 200) {
					this.types = res.result;
				}
			});
		},
		closeImg(index) {
			this.image.splice(index, 1);
		},
		chooseImage() {
			if (this.image.length > 3) {
				this.$t.toast("凭证不超过三张");
				return
			}
			this.$t.chooseImgUpload().then((url) => {
				this.image.push(url);
			});
		},
		savesetting() {
			if (!this.form.tel) {
				this.$t.toast("请输入您的联系方式");
			} else if (!this.form.man) {
				this.$t.toast("请输入您的联系姓名");
			} else if (!this.form.types) {
				this.$t.toast("请选择反馈类型");
			} else if (!this.form.content) {
				this.$t.toast("请填写问题描述");
			} else {
				let params = this.form;
				params.piclink = this.image.join("@");
				this.$api.getUser.getFeedbackSaveadd(params).then((res) => {
					if (res.code == 200) {
						this.$t.toast("反馈成功");
						setTimeout(() => {
							this.$t.gotoBack();
						}, 1000);
					}
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.form_part {
	background-color: #fff;
	padding: 20rpx;
	margin-top: 20rpx;

	.form_item {
		margin-bottom: 30rpx;
	}

	.form_item_title {
		margin-bottom: 15rpx;

		>text {
			color: #F21E46;
		}
	}
}

.form_contact {
	.form_item {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.form_item_title {
			margin-bottom: 0;
		}

		&:last-child {
			margin-bottom: 0
		}
	}
}

.u-radio {
	margin-right: 16rpx;
}

/deep/.u-cell {
	flex: 1;

	.u-cell__body {
		padding: 10rpx 0;
	}
}

.pic_logo_1 {
	width: 100%;
	padding-bottom: 20rpx;
	@include flex-center(row, flex-start, center, wrap);
}

.uploader_img {
	width: 184rpx;
	height: 184rpx;
	background: #f4f4f4;
	border-radius: 6rpx;
	margin: 20rpx 12rpx 0 0;
	@include flex-center(column, center, center);
}

.uploader_img_1 {
	width: 184rpx;
	height: 184rpx;
	border-radius: 6rpx;
	margin: 20rpx 12rpx 0 0;
	background: #f4f4f4;
	position: relative;

	image {
		width: 184rpx;
		height: 184rpx;
	}

	.u-icon {
		position: absolute;
		right: 4rpx;
		top: 4rpx;
	}
}

.btn {
	width: 710rpx;
	margin: 40rpx auto;
}
</style>
